<template>
  <div class="about-container">
    <div class="about-cover">
      <fs-image src="https://pic.fasyncsy.com.cn/coverPic/mobile-about.jpg" />
    </div>
    <div class="about-content">
      <h1 style="text-align: center">关于</h1>
      <h2>关于本站：</h2>
      <p>
        这里是一名二本软件工程专业的在校生，热爱前端开发，喜欢折腾网页动效。本站主要记录个人一些学习笔记和日常生活，同时挖掘更多有趣的动画交互。由于后端基础薄弱，希望看官不要在该网站上做过多的测试~
      </p>
      <h2>该博客使用技术栈：</h2>
      <p>前端: Vue3.2 + TS + Pinia + vue-router + Vite4 highlight.js marked等其他余项</p>
      <p>后端: Koa2 + sequelize + mysql + 七牛云图床等其他余项</p>
      <p>更多内容可以在留言板块留言或者添加作者联系方式~</p>
      <h2>样式和部分功能灵感来源：</h2>
      <p>移动端主体样式和动画：<a href="https://www.adicw.cn/" target="_blank">Χαλαρό</a></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import FsImage from "@/components/FsImage/FsImage.vue";
</script>

<style scoped lang="scss">
.about-container {
  position: relative;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  .about-cover {
    position: absolute;

    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    filter: blur(5px);
  }
  .about-content {
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    z-index: 10;
    h1 {
      margin: 10px 0;
    }
    p {
      line-height: 1.5em;
    }
    a {
      color: #aaa;
    }
  }
}
</style>
